<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>视频直播</title>
    <link href="../../css/base.css" rel="stylesheet" type="text/css">
    <style>
        .movie{width: 100%;height: 200px;background: black;float: left;}
        .live{height: 100vh;box-sizing: border-box;padding-top: 200px;}
        .live_content{background: #eeeeee;height: 100%;overflow: auto;}
        .live_content_list{padding: 5px;}
        .live_content_list_top{width: 100%;height: 36px;line-height: 36px;}
        .live_content_list_bottom{background: #fff;padding: 10px;word-break: break-all;display: inline-block;font-size: 15px;}
        .live_name{font-size: 14px;padding-left: 40px;display: inline-block;}
        .live_name_zl{background: url("../../images/icon_zl@2x.png") no-repeat left;background-size: 35px 16px;;}
        .live_name_hy{background: url("../../images/icon_hy@2x.png") no-repeat left;background-size: 35px 16px;;}
        .live_name_yk{background: url("../../images/icon_yk@2x.png") no-repeat left;background-size: 35px 16px;;}
        .live-time{float: right;font-size: 14px;}
        .live_chat{position: fixed;bottom: 0;width: 100%;height: 49px;border-top: 1px solid #e3e3e3;padding: 10px;background: #ffffff;box-sizing: border-box;}
        .btn{width: 42px;border-radius: 4px;background: #b63831;color: #ffffff;height: 25px;display: inline-block;cursor: pointer;line-height: 25px;text-align: center;font-size: 12px;}
        .emoji{width: 25px;height: 25px;padding: 0 5px;vertical-align: middle;}
        .live_chat>span{vertical-align: middle;display: inline-block;}
        .content_box{height: 29px;width: 268px;}
        .content_box>input{height: 100%;width: 100%;border: 1px solid #e3e3e3;}
    </style>
</head>
<body>
<div class="warp">
    <div class="movie">
        这里是视频区
    </div>
    <div class="live">
        <div class="live_content">
            <div class="live_content_list">
                <div class="live_content_list_top">
                    <p class="live-time font2">16:09</p>
                    <span class="font2 live_name_zl live_name">琦琦</span>
                </div>
                <div class="live_content_list_bottom font1">
                    文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
                </div>
            </div>
            <div class="live_content_list">
                <div class="live_content_list_top">
                    <p class="live-time font2">16:09</p>
                    <span class="font2 live_name_hy live_name">会员</span>
                </div>
                <div class="live_content_list_bottom ">
                    文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
                </div>
            </div>
            <div class="live_content_list">
                <div class="live_content_list_top">
                    <p class="live-time font2">16:09</p>
                    <span class="font2 live_name_yk live_name">游客</span>
                </div>
                <div class="live_content_list_bottom ">
                    文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容文字内容
                </div>
            </div>
        </div>
    </div>
    <div class="live_chat">
        <span class="content_box"><input id="content"></span>
        <span class="content_on"><img class="emoji" src="../../images/icon_face@2x.png"/><span class="btn btn_send">发送</span></span>
    </div>
</div>
<script src="../../js/jquery-2.2.2.js"></script>

<script>
    $(function () {
        $("#content").on("focus", function () {
           $(".content_box").css({
               "width":"100%",
               "height":"75px",
               "margin-bottom":"9px"
           });
            $(".live_chat").css("height","auto");
            $(".content_on").addClass("fr");
        });
    });
</script>
</body>
</html>